<script setup lang="ts">
  import { onMounted, PropType, ref, watch } from 'vue'
  import { EmpDetail } from '../types'
  import type { TabsPaneContext } from 'element-plus'
  import { useEmpDetail } from '../services'

  const props = defineProps({
    info: {
      type: Object as PropType<EmpDetail>,
      required: true,
    },
    modelValue: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
  }>()

  const { empInfo, getEmpInfoLoading, getEmpInfoFn } = useEmpDetail()

  // 激活的标签名
  const activeName = ref('info')

  // 弹窗状态
  const modalVisible = ref(props.modelValue)

  // 标签点击事件
  const handleTabClick = (tab: TabsPaneContext) => {}

  // 关闭弹窗事件
  const onHideModal = () => {
    modalVisible.value = false
    emits('update:modelValue', modalVisible.value)
  }

  watch(
    () => props.modelValue,
    (value) => {
      modalVisible.value = value
      if (value) {
        getEmpInfoFn(props.info.id, props.info.empId)
      }
    },
  )

  onMounted(() => {
    if (props.modelValue) {
      getEmpInfoFn(props.info.id, props.info.empId)
    }
  })
</script>

<template>
  <!-- 职员信息弹窗 -->
  <h-dialog title="职员信息" v-model="modalVisible" @close="onHideModal">
    <div class="employee_info_list">
      <div class="info_item">
        <div class="label">职员姓名:</div>
        <div class="value">{{ props.info.name }}</div>
      </div>
      <div class="info_item">
        <div class="label">登录账号:</div>
        <div class="value">{{ props.info.phone }}</div>
      </div>
      <div class="info_item">
        <div class="label">最后登录:</div>
        <div class="value">{{ props.info.loginTime }}</div>
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="职员信息" name="info">
        <div class="employee_info_list" v-loading="getEmpInfoLoading">
          <template v-if="empInfo">
            <div class="info_item" v-if="false">
              <div class="label">绑定手机:</div>
              <div class="value">{{ empInfo.phone }}</div>
            </div>
            <div class="info_item">
              <div class="label">职员角色:</div>
              <div class="value">{{ empInfo.role }}</div>
            </div>
            <div class="info_item">
              <div class="label">所在部门:</div>
              <div class="value">{{ empInfo.organize }}</div>
            </div>
          </template>
        </div>
      </el-tab-pane>
      <el-tab-pane label="登录日志" name="login_log"></el-tab-pane>
      <el-tab-pane label="操作日志" name="operate_log"></el-tab-pane>
    </el-tabs>
    <template #footer>
      <HButton is-modal @click="onHideModal">关闭</HButton>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  .employee_info_list {
    display: flex;
    column-gap: 72px;
    margin-bottom: 12px;

    .info_item {
      display: flex;
      column-gap: 5px;

      .label {
        color: #606266;
      }
    }
  }
</style>
